Day32 玩轉同樂

簡單小語

最近莫名看到這種特效很炫的就會想要寫來練習，又是為元素的應用，當然還有flex的排版，大致上沒太大問題，不過現在對於Body的控制還不是很熟悉，套用height:100%及height:100vh呈現出來的樣式就會有所不同，在不寫死高度的前提之下，就先用100vh替代，物件的高度是用padding給推出來的，為的就是可以自適應大小，要開始以好控制好調整為前提的撰寫(咦!?又是自己說哈哈)。

筆記分享

1. 盡量簡化class的濫用並確認每一個class都是有用的。
2. 群組式宣告及統一宣告的應用釐清，將不會有大改動及共同的樣式設定在共同的標籤。
3. flex的應用再熟悉，justify-content，align-items。
4. 共同標籤還可利用:nth-child()去指定選擇，增加靈活性且避免濫用class。
5. THREE利用時間差，讓文字變化及背景變化的時間有差距。
6. THREE背景效果是利用border-radius:50% -> border-radius:0的變化，與樣本有差距(仍須努力)。
7. Fancy利用transform:skewXY()去改變斜度呈現與樣板相同樣式並使用overflow:hidden及transform:translateY()去移動位置且隱藏。
8. Fancy使用transform:rotate()及width，height的搭配，呈現出旋轉並顯現的效果。
9. Links使用偽元素切割兩半，透過定位的top及bottom控制位置並產生移動效果，透過transform:translateY()推移控制位置。
10. Links的文字故意慢1秒，為了達成讓框框抵達後才出現文字的效果。

持續練習

Practice(200828 Day 32)

樣板來源

Three Fancy Link Hover Effects

2020 iT邦幫忙鐵人賽 Day32 網頁前端-持續練習(玩轉同樂)